<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻盖的音乐盒-兔子代替</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 200px;
            width: 200px;
            /*border: 1px solid #000;*/
            margin: 100px auto;
            position: relative;
            transition: all 2s;
        }
        div::before,div::after{
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            /*display: block;*/
            height: 200px;
            width: 200px;
            border: 1px solid #000;
            border-radius: 50%;
            background: #0AB6C3;
            transition: all 2s;
            transform-origin: bottom;
            /*backface-visibility:hidden;*/
        }
        div::after{
            /*left: 350px;*/
            content: "4";
            background: url("img/rabbit1.jpg") no-repeat -150px -80px;
        }
        div::before{
            /*left: 350px;*/
            content: "2";
            background: url("img/rabbit2.jpg") no-repeat -90px -60px;
            /*transform: rotateY(180deg);*/
        }
        body:hover div::after{
            /*transform: rotateY(-180deg);*/
            transform:rotateX(180deg) ;
            /*backface-visibility:hidden;*/
        }
        /*body:hover div::before{*/
        /*    transform: rotateY(0deg);*/

        /*}*/
    </style>
</head>
<body>
<!--        //利用兔子的照片可以旋转，两面都能看到-->
<div class="box1"></div>
</body>
</html>